<template>
    <div class="app-container">
      <el-form :model="queryParams" ref="queryRef" :inline="true" v-show="showSearch" label-width="68px">
        <el-row>
            <el-col :span="12">
                <el-form-item label="所属站点" prop="deptId" style="width: 90%;">
                  <el-tree-select
                      v-model="queryParams.deptId"
                      :data="deptOptions"
                      :props="{ value: 'deptId', label: 'deptName', children: 'children' }"
                      value-key="deptId"
                      placeholder="请选择所属站点"
                      check-strictly
                  />
                </el-form-item>
            </el-col>
            <el-col :span="12">
                <el-button icon="Refresh" @click="resetQuery">重置</el-button>
                <el-button type="danger" icon="Search" @click="handleQuery">查询</el-button>
            </el-col>
        </el-row>
      </el-form>
  
      <el-row :gutter="10" class="mb8">
        <el-col :span="1.5">
          <el-button
            type="danger"
            icon="Plus"
            @click="handleAdd"
            v-hasPermi="['partybuilding:NewsSite:add']"
          >新增</el-button>
        </el-col>
      </el-row>
  
      <div class="site-list">
        <div class="site-box" v-for="item in newsSiteList">
            <div class="top-box">{{ item.deptName }}</div>
            <div class="pic-box">
              <el-image style="width: 100%; height: 250px; object-fit: cover;" :src="baseUrl+item.img"></el-image>
            </div>
            <div class="bottom-box">
                <div class="leftTitle">
                  <el-switch
                      v-model="item.status"
                      inline-prompt
                      active-value="1"
                      active-text="开"
                      inactive-value="0"
                      inactive-text="关"
                      @click="chanageStatus(item)"
                    />
                </div>
                <div class="rightTitle">
                    <el-button link type="primary" @click="handlePreview(item)">查看</el-button>
                    <el-button link type="primary" @click="handleDelete(item)">删除</el-button>
                </div>
            </div>
        </div>
      </div>

      <pagination
        v-show="total>0"
        :total="total"
        v-model:page="queryParams.pageNum"
        v-model:limit="queryParams.pageSize"
        @pagination="getList"
      />

      <!-- 添加或修改站点对话框 -->
      <el-dialog :title="title" v-model="open" width="39%" append-to-body style="margin-top: 9px!important;">
        <el-form ref="NewsSiteRef" :model="form" :rules="rules" label-width="109px">
          <el-row>
            <el-col :span="24">
                <el-form-item label="所属站点" prop="deptId" style="width: 79%;">
                <el-tree-select
                    v-model="form.deptId"
                    :data="deptOptions"
                    :props="{ value: 'deptId', label: 'deptName', children: 'children' }"
                    value-key="deptId"
                    placeholder="请选择所属站点"
                    check-strictly
                />
                </el-form-item>
            </el-col>
            <el-col :span="24">
              <el-form-item label="封面图片" prop="img">
                <image-upload
                    v-model="form.img"
                    :multiple="true"
                    :limit="1"
                    :suggestSize="'530*380'"
                    :file-type="['jpg', 'png', 'jpeg']"
                    :file-size="200">
                </image-upload>
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item label="是否开启" prop="isscroll">
                <el-radio-group v-model="form.status">
                  <el-radio v-for="dict in pb_status" 
                    :key="dict.value"
                    :label="dict.label"
                    :value="dict.value">
                  </el-radio>
                </el-radio-group>
              </el-form-item>
            </el-col>
          </el-row>
        </el-form>
        <template #footer>
          <div class="dialog-footer">
            <el-button type="primary" @click="submitForm">确 定</el-button>
            <el-button @click="cancel">取 消</el-button>
          </div>
        </template>
      </el-dialog>
    </div>
  </template>
  
  <script setup name="News">
  import { listNewsSite, getNewsSite, delNewsSite, addNewsSite, updateNewsSite, editStatus } from "@/api/partybuilding/NewsSite";
  import { listOrg } from "@/api/partybuilding/Org";
  const baseUrl = import.meta.env.VITE_APP_BASE_API;
  const siteUrl = import.meta.env.VITE_SITE_SIGN_URL;
  const { proxy } = getCurrentInstance();
  const newsSiteList = ref([]);
  const open = ref(false);
  const loading = ref(true);
  const showSearch = ref(true);
  const ids = ref([]);
  const total = ref(0);
  const title = ref("");
  const typeIdList = ref([]);
  const deptOptions = ref([]);
  const pb_status = ref([{label: '是', value: '1'}, {label: '否', value: '0'}]);// 是否开启：0否，1是
  const status = ref(true);
  
  const data = reactive({
    form: {
      id: null,
      deptId: null,
      deptName: null,
      img: null,
      status: null,
    },
    queryParams: {
      pageNum: 1,
      pageSize: 9,
      deptId: null
    },
    rules: {
      deptId: [
        { required: true, message: "请选择所属站点", trigger: "blur" }
      ],
      img: [
        { required: true, message: "请上传封面图片", trigger: "blur" }
      ],
    }
  });
  
  const { queryParams, form, rules } = toRefs(data);
  
  /** 查询部门下拉树结构 */
  function getDeptTree() {
    listOrg().then(response => {
      deptOptions.value = proxy.handleTree(response.rows, "deptId");
    });
  };

  /** 查询站点列表 */
  function getList() {
    loading.value = true;
    listNewsSite(queryParams.value).then(response => {
      newsSiteList.value = response.rows;
      newsSiteList.value.forEach(item => {
        if (item.status){
          item.status = item.status+'';
        }
      });
      total.value = response.total;
      loading.value = false;
    });
  }
  
  // 取消按钮
  function cancel() {
    open.value = false;
    reset();
  }
  
  // 表单重置
  function reset() {
    form.value = {
      id: null,
      deptId: null,
      deptName: null,
      img: null,
      status: null,
      createBy: null,
      createTime: null,
      updateBy: null,
      updateTime: null
    };
    typeIdList.value = [];
    proxy.resetForm("NewsSiteRef");
  }
  
  /** 搜索按钮操作 */
  function handleQuery() {
    queryParams.value.pageNum = 1;
    getList();
  }
  
  /** 重置按钮操作 */
  function resetQuery() {
    typeIdList.value = [];
    proxy.resetForm("queryRef");
    handleQuery();
  }

  /** 新增按钮操作 */
  function handleAdd() {
    reset();
    form.value.status = '1';
    open.value = true;
    title.value = "添加站点";
  }

  /** 修改状态操作 */
  function chanageStatus(row) {
    let statusText = row.status === '1' ? '开启' : '关闭';
    proxy.$modal.confirm('是否'+statusText+'“' + row.deptName + '”的站点？').then(function() {
      return editStatus(row);
    }).then(() => {
      getList();
      proxy.$modal.msgSuccess(statusText+"成功");
    }).catch(() => {
      row.status = row.status === '1' ? '0' : '1';
    });
  }
  /** 提交按钮 */
  function submitForm() {
    proxy.$refs["NewsSiteRef"].validate(valid => {
      if (valid) {
        if (form.value.id != null) {
          updateNewsSite(form.value).then(response => {
            proxy.$modal.msgSuccess("修改成功");
            open.value = false;
            getList();
          });
        } else {
          addNewsSite(form.value).then(response => {
            proxy.$modal.msgSuccess("新增成功");
            open.value = false;
            getList();
          }).catch((except) => {
            console.log(except);
            proxy.$modal.msgError(except);
          });
        }
      }
    });
  }
  
  /** 删除按钮操作 */
  function handleDelete(row) {
    proxy.$modal.confirm('是否确认删除站点【' + row.deptName + '】的数据项？').then(function() {
      return delNewsSite(row.id);
    }).then(() => {
      getList();
      proxy.$modal.msgSuccess("删除成功");
    }).catch(() => {});
  }
  
  /** 预览按钮操作 */
  function handlePreview(row) {
    window.open(siteUrl+"?deptId="+row.deptId);
  }
  
  getList();
  getDeptTree();
  </script>
<style lang="scss" scoped>
.site-list {
    display: flex;
    flex-wrap: wrap;
    margin-top: 20px;
    .site-box {
        width: 25%;
        margin-right: 70px;
        .top-box {
          color: rgba(0, 0, 0, .85);
          font-size: 14px;
          margin-bottom: 4px;
        }
        .pic-box {
            width: 100%;
            height: 250px;
            border-radius: 5px;
            box-shadow: -2px 2px 5px #999;
        }
        .bottom-box {
            display: flex;
            justify-content: space-between;
            padding: 10px 0px;
            margin-bottom: 20px;
            .leftTitle {
                font-size: 12px;
                font-weight: bold;
                color: #fff;
                background-color: #fff;
            }
            .rightTitle {
                display: flex;
                justify-content: flex-end;
                margin-top: 10px;
                .el-button {
                  margin-left: 10px;
                  color: red;
                  background-color: #fff;
                }
            }
        }
    }
}
</style>